import React, { Component } from 'react'
// 1.创建上下文对象
const ThemeContext = React.createContext()
const ColorContext = React.createContext()
// 配合 开发者工具查看效果
ThemeContext.displayName = 'ThemeContext'
ColorContext.displayName = 'ColorContext'
class MyButton extends Component {
  // 3.Context.Consumer完成取值,内部为一个函数，函数的默认参数为祖先组件传递的值，可以返回一段jsx代码
  render () {
    return (
      <div>
        <ThemeContext.Consumer>
          {
            (value) => {
              return <span>{ value }</span>
            }
          }
        </ThemeContext.Consumer>
        <button>1</button>
      </div>
    )
  }
}
class ToolBar extends Component {
  render () {
    return (
      <MyButton></MyButton>
    )
  }
}
export default class App extends Component {
  render() {
    return (
      <div>
        {/* 2.祖先组件传递数据
          通过上下文对象 的Provider组件完成传值，必须通过value属性传值
        */}
        <ThemeContext.Provider value="dark">
          <ColorContext.Provider value = "red">
            <ToolBar/>
          </ColorContext.Provider>
        </ThemeContext.Provider>
      </div>
    )
  }
}
